<template>
	<view class="content" :style="{height: windowHeight + 'px'}">
		<yb-flip ref="flip" :style="{height: windowHeight + 'px'}" :current="current" :duration="300"
		pulldownable pullupable type="real" :data="list" @pulldown="handlePulldown" @pullup="handlePullup" @change="handleChange">
			<!-- #ifndef MP -->
			<template v-slot="{item, index}">
			<!-- #endif -->
			<!-- #ifdef MP -->
			<template v-for="(item, index) in list" :slot="`wx:${index}`">
			<!-- #endif -->
				<view class="flip">
					<!-- <video style="width:100%;height: 100%;flex: 1;" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4" controls></video> -->
					<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
				</view>
			</template>
			<template #pulldownDefault>
				<view class="pulldown">
					<text class="pulldown_text">下拉刷新</text>
				</view>
			</template>
			<template #pulldownReady>
				<view class="pulldown">
					<text class="pulldown_text">松开刷新</text>
				</view>
			</template>
			<template #pulldownLoading>
				<view class="pulldown">
					<text class="pulldown_text">正在刷新</text>
				</view>
			</template>
			<template #pulldownSuccess>
				<view class="pulldown">
					<text class="pulldown_text">刷新成功</text>
				</view>
			</template>
			<template #pulldownFail>
				<view class="pulldown">
					<text class="pulldown_text">刷新失败</text>
				</view>
			</template>
			<template #pullupDefault>
				<view class="pulldown">
					<text class="pulldown_text">上拉加载</text>
				</view>
			</template>
			<template #pullupReady>
				<view class="pulldown">
					<text class="pulldown_text">松开刷新</text>
				</view>
			</template>
			<template #pullupLoading>
				<view class="pulldown">
					<text class="pulldown_text">正在刷新</text>
				</view>
			</template>
			<template #pullupSuccess>
				<view class="pulldown">
					<text class="pulldown_text">刷新成功</text>
				</view>
			</template>
			<template #pullupFail>
				<view class="pulldown">
					<text class="pulldown_text">刷新失败</text>
				</view>
			</template>
		</yb-flip>
		<view class="btns">
			<button @tap="flipToPrev">上一张</button>
			<button @tap="refresh">刷新</button>
			<button @tap="flipToNext">下一张</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 2,
				list: [],
				windowHeight: 0
			}
		},
		onLoad() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			for ( let i = 0; i < 1000; i++ ) {
				this.list.push(i)
			}
		},
		methods: {
			handleChange (e) {
				console.log(e);
			},
			handlePulldown (callback) {
				setTimeout(() => {
					this.list = []
					for ( let i = 0; i < 3; i++ ) {
						this.list.push(i)
					}
					callback('success')
				}, 1000)
			},
			handlePullup (callback) {
				setTimeout(() => {
					let len = this.list.length
					for ( let i = len; i < len + 10; i++ ) {
						this.list.push(i)
					}
					callback('success')
				}, 1000)
			},
			flipToPrev () {
				this.$refs.flip.flipToPrev()
			},
			flipToNext () {
				this.$refs.flip.flipToNext()
			},
			refresh () {
				this.list = [7,8,9]
				this.current = 0
				this.$refs.flip.refresh()
			},
			onTap () {
				uni.showToast({
					title: '点击按钮'
				})
			}
		}
	}
</script>

<style>
	.flip {
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifdef APP-PLUS || H5 */
		height: 100%;
		/* #endif */
		/* #ifdef MP */
		height: 100vh;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.button {
		position: absolute;
		top: 800rpx;
		left: 30rpx;
		right: 30rpx;
	}
	.pulldown {
		display: flex;
		align-items: center;
		justify-content: center;
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
	}
	.pulldown_text {
		color: #fff;
	}
	.btns {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}
</style>
